<template>
    <el-container>
        <el-main>
            <el-form :inline="true">
                <MyForm ref="MyForm"></MyForm>
                <el-form-item label="姓名">
                    <el-input v-model="name"></el-input>
                </el-form-item>
                <el-button @click="submit">提交</el-button>
            </el-form>
            <TableTemplate ref="TableTemplate" :tableData="tableData" :columns="columns"
                           :buttons="buttons"></TableTemplate>
            <el-dialog title="详情" :visible.sync="dialogTableVisible">
                <el-form>
                    <el-input v-model="form.id" v-show="false"></el-input>
                    <el-form-item label="姓名">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="日期">
                        <el-input v-model="form.date"></el-input>
                    </el-form-item>
                    <SubmitButton ref="SubmitButton"></SubmitButton>
                </el-form>
            </el-dialog>
        </el-main>
    </el-container>
</template>
<script>
    import TableTemplate from "@/components/table/TableTemplate";
    import MyForm from "@/components/table/MyForm";
    import SubmitButton from "@/components/table/SubmitButton";

    export default {
        name: 'Index',
        components: {
            MyForm,
            TableTemplate,
            SubmitButton
        },
        data() {
            return {
                name: '',
                form: {
                    id: '',
                    name: '',
                    date: '',
                    address: ''
                },
                dialogTableVisible: false,
                tableData: [{
                    id: '1',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: '2',
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: '3',
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    id: '4',
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }],
                columns: [{name: 'id'}, {name: 'name', width: 125}, {name: 'date', width: 150}, {
                    name: 'address',
                    width: 150
                }],
                buttons: [{
                    name: '删除',
                    seen: true
                }, {
                    name: '添加',
                    seen: true
                }],

            }
        },
        methods: {
            submit() {
                this.$refs.TableTemplate.saveRecord()
            }
        }
    }

</script>

